<!DOCTYPE html	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:sdu="http://sduept.com/jsf/cc" 
	xmlns:s="http://sduept.security.el/func">
<h:head>
	<link href="/css/primefaces/menubase.css" rel="stylesheet" type="text/css" />
	<!-- Bootstrap 3.3.6 -->
	<link rel="stylesheet" href="#{request.contextPath}/resources/css/common.css" />
	<link rel="stylesheet"
		href="/resources/bootstrap/css/bootstrap.min.css" />
	<!-- Font Awesome -->
	<link rel="stylesheet"
		href="/resources/font-awesome/css/font-awesome.min.css" />
	<link rel="stylesheet"
		href='#{request.contextPath}/resources/plugins/layer/skin/layer.css' />
	<!-- Ionicons -->
	<link rel="stylesheet" href="/resources/css/ionicons.min.css" />
	<!-- Theme style -->
	<link rel="stylesheet" href="/resources/dist/css/AdminLTE.min.css" />
	<link rel="stylesheet"
		href="/resources/dist/css/skins/_all-skins.min.css" />
	<title>#{inspectionPlanDetailController.currentInspectionPlan.name}</title>
	<style>
		.ui-widget{
		font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
		}
		.ui-tree {
			width: 100%;
		    position: relative;
		    max-height: 500px;
		    overflow-y: scroll;
		}
		.info-box-icon {
			/* border-top-left-radius: 50px; */
			height:77px;
			line-height: 76px;
		}
		.info-box {
			min-height: 78px;
		}
		.detailStandard {
		    height: 600px;
		    overflow-y: scroll;
		}
		::-webkit-scrollbar {/*滚动条整体样式*/
		        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
		        height: 1px;
		    }
		::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
		        border-radius: 10px;
		         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
		        /* background: #535353; */
		        background: #ccc;
		    }
		::-webkit-scrollbar-track {/*滚动条里面轨道*/
		        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
		        border-radius: 10px;
		        background: #EDEDED;
		    }
		/*IE*/
		.sum_menu {
			scrollbar-arrow-color:#f4ae21;
			scrollbar-face-color:#3399FF;
			scrollbar-3dlight-color:#666;
			scrollbar-highlight-color: #666;
			scrollbar-shadow-color: #3399FF;
			scrollbar-darkshadow-color: #666;
			scrollbar-track-color: #eee;
			scrollbar-base-color:#eee;
		}
		.ui-panelgrid .ui-panelgrid-cell {
		    border-width: 1px;
		    border-style: solid;
		    border-color: #999;
		    padding: 4px 10px;
		}
	</style>
	<!-- Bootstrap 3.3.6 -->
	<script src="/resources/bootstrap/js/bootstrap.js"></script>
	
</h:head>
 
	<h:body>
			<center>
				<div class="row" style="width:95%;" >
						<div class='col-md-12'>
							<div class='info-box' style="/* border-top-left-radius: 53px; */border: 1px solid #{inspectionPlanDetailController.getStatusColor()};">
								<span class='info-box-icon' style="width:150px;background-color:#{inspectionPlanDetailController.getStatusColor()};"> 
									<h:outputText style="font-size: 32px;font-style:italic;color:#fff" value="#{inspectionPlanDetailController.getStatusStr()}"/>
								</span> 
								<div class='info-box-content'>
								   <div class='col-md-2  border-right'>
								      <div class='description-block'>
								        <p>评价厂站总数</p>
								        <p class="text-yellow"> 
								           <h:outputText value="#{inspectionPlanDetailController.inspectionStationTotalCount}"/>
								        </p>
								      </div>
								   </div>
								   <div class='col-md-1  border-right'>
								      <div class='description-block'>
								        <p>已完成</p>
								        <p class="text-green"> 
								           <h:outputText value="#{inspectionPlanDetailController.finishedCount}"/>
								        </p>
								      </div>
								   </div>
								   <div class='col-md-1  border-right'>
								      <div class='description-block'>
								        <p>未完成</p>
								        <p class="text-red"> 
								           <h:outputText value="#{inspectionPlanDetailController.unFinishedCount}"/>
								        </p>
								      </div>
								   </div>
								   
								   <div class='col-md-2  border-right'>
								      <div class='description-block'>
								        <p>逾期</p>
								        <p class="text-red"> 
								           <h:outputText value="#{inspectionPlanDetailController.getOvertimeCount()}"/>
								        </p>
								      </div>
								   </div>
								   <div class='col-md-2  border-right'>
								      <div class='description-block'>
								        <p>剩余天数</p>
								        <p class="text-yellow"> 
								           <h:outputText value="#{inspectionPlanDetailController.getRemainingDays()}"/>
								        </p>
								      </div>
								   </div>
								   <div class='col-md-2  border-right'>
								      <div class='description-block'>
								        <p>已扣分</p>
								        <p class="text-light-blue"> 
								           <h:outputText value="#{inspectionPlanDetailController.totalDeduct}"/>
								        </p>
								      </div>
								   </div>
								   <!-- <div class='col-md-2  border-right'>
								      <div class='description-block'>
								        <p>得分</p>
								        <p class="text-red"> 
								           <h:outputText value="100.0"/>
								        </p>
								      </div>
								   </div> -->
								   <!-- <div class='col-md-1  border-right'>
								      <div class='description-block'>
								        <p>完成率</p>
								        <p class="text-green"> 
								           <h:outputText value="12">
								             <f:convertNumber pattern="#0.00%"/>
								           </h:outputText>
								        </p>
								      </div>
								   </div> -->
								</div>
							</div>
						</div>
					</div>
			</center>
	      		<div class="col-md-12">
	      		<!-- 左侧：评价厂站树结构 -->
		      	<div class="col-md-2">
		      	     <div class="box">
		    	        <div class="box-header">
		    	        	<h3 class="box-title">评价厂站</h3>
		    	        </div>
		    	        <div class="box-body">
		    	        <h:form id="form1">
		    	           <p:tree value="#{inspectionPlanDetailController.inspectionStationRoot}" var="node" dynamic="true" selectionMode="single"
	                            selection="#{inspectionPlanDetailController.selectedNode}">
	                            <p:ajax event="select" listener="#{inspectionPlanDetailController.onNodeSelect}" update="rightForm:instationBasic detailForm:detail"/>
						        <p:treeNode type="department" icon="fa fa-home">
									<h:outputText value="#{node}" style="color:green"/>
								</p:treeNode>
						        <p:treeNode type="inspectionStation" icon="fa fa-home">
									<h:outputText value="#{node}"/>
								</p:treeNode>
						    </p:tree>
						 </h:form>
		    	        </div>
	    	   		 </div>
		      	</div>
		      	<!-- 右侧 -->
		      	<div class="col-md-10">
		      	  <div class="box">
	    	        <!-- <div class="box-header">
	    	        	<h3 class="box-title">详细信息</h3>
	    	        </div> -->
	    	        <div class="box-body">
	    	        <ul class="nav nav-tabs">
						<li class="active"><a href="#selectedStandard" data-toggle="tab">基础信息</a></li>
						<li><a href="#detailStandard" data-toggle="tab">详细信息</a></li>
					</ul>
					<div class="tab-content no-padding">
						<div class="chart tab-pane active" id="selectedStandard">
							<h:form id="rightForm">
								<p:panelGrid id="instationBasic" style="text-align:center;width:95%;margin:10px" rendered="#{inspectionPlanDetailController.selectedInspectionStation!=null}">
			    	        		<p:row>
										<p:column style="background-color:#eee">
											<h:outputText value="状态" />
										</p:column>
										<p:column>
											<h:outputText style="color:#{inspectionPlanDetailController.inspectionStationStatusColor}" 
												value="#{inspectionPlanDetailController.getInspectionStationStatusStr()}" />
										</p:column>
										<p:column style="background-color:#eee">
											<h:outputText value="已扣分" />
										</p:column>
										<p:column>
											<h:outputText style="color:blue" value="#{inspectionPlanDetailController.getInspectionStationDeduct()}" />
										</p:column>
									</p:row>
									<p:row>
										<p:column style="background-color:#eee">
											<h:outputText value="评价对象" />
										</p:column>
										<p:column>
											<h:outputText value="#{inspectionPlanDetailController.selectedInspectionStation.stationName}" />
										</p:column>
										<p:column style="background-color:#eee">
											<h:outputText value="专家"/>
										</p:column>
										<p:column>
											<h:outputText value="#{inspectionPlanDetailController.getInspectionExpertsStr()}"/>
										</p:column>
										
									</p:row>
									<p:row>
										<p:column style="background-color:#eee">
											<h:outputText value="所属单位"/>
										</p:column>
										<p:column>
											<h:outputText value="#{inspectionPlanDetailController.affiliatedUnitName}"/>
										</p:column>
										<p:column style="background-color:#eee">
											<h:outputText value="评价时间" />
										</p:column>
										<p:column>
											<h:outputText readonly="true"  value="#{inspectionPlanDetailController.selectedInspectionStation.startTime}"  >
									       		<f:convertDateTime pattern="yyyy-MM-dd" timeZone="GMT+8"/>  
								   		    </h:outputText>至
								   		    <h:outputText readonly="true"  value="#{inspectionPlanDetailController.selectedInspectionStation.endTime}"  >
									       		<f:convertDateTime pattern="yyyy-MM-dd" timeZone="GMT+8"/>  
								   		    </h:outputText>
										</p:column>
									</p:row>
									<p:row>
										<p:column style="background-color:#eee">
											<h:outputText value="总评价项"/>
										</p:column>
										<p:column>
											<h:outputText value="#{inspectionPlanDetailController.totalInspectionItemSize}"/>
										</p:column>
										<p:column style="background-color:#eee">
											<h:outputText value="已完成项"/>
										</p:column>
										<p:column>
											<h:outputText value="#{inspectionPlanDetailController.finishedInspectionItemSize}"/>
										</p:column>
									</p:row>
									
			    	        	</p:panelGrid>
							</h:form>
						</div>
						<div class="chart tab-pane detailStandard" id="detailStandard">
							<h:form id="detailForm">
								<s:dataTable id="detail" value="#{inspectionPlanDetailController.selectLists}"
									var="item" sortBy="#{item.projectOrder}"
									emptyMessage="无记录" style="text-align:left" >
									<f:facet name="header">
										<h:outputText style="text-align:center;"  value="#{inspectionPlanDetailController.selectedInspectionStation.name}" />
									</f:facet>
									<p:headerRow>
										<s:column colspan="5">
											<h:outputText value="#{item.projectNo}、#{item.projectName}" />
										</s:column>
									</p:headerRow>
									<s:column headerText="评价项目" groupRow="true" style="width:15%">
										<h:outputText value="#{item.itemNo}.#{item.itemName}" />
									</s:column>
									<s:column headerText="检查要素及要求" groupRow="true">
										<h:outputText value="#{item.inspectionNo}.#{item.inspectionName}" />
									</s:column>
									<s:column headerText="评分标准">
										<h:outputText value="#{item.scoreNo}.#{item.scoreName}" />
									</s:column>
									<s:column headerText="状态" style="width:80px;text-align:center">
										<h:outputText style="color:#{inspectionPlanDetailController.inspectionItemStatusColor}" 
											value="#{inspectionPlanDetailController.getInspectionItemStatusStr(item.status)}" />
									</s:column>
									<s:column headerText="扣分" style="width:60px;text-align:center">
										<h:outputText value="#{item.deduct}" />
									</s:column>
								</s:dataTable>
							</h:form>
						</div>
					</div>
	    	        	
	    	        </div>
	    	      </div>
		       </div>
	      	</div>
	</h:body>
	
</html>
